<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box msg top" abc="这是div的abc" src="这是div的src" value="这是div的value"></div>
    <img src="这是img的src" alt="这是img的alt" class="img" href="这是img的href">
    <a href="这是a的href" src="这是a的src" class="a"></a>
</body>
<script>
    

    var box = document.querySelector(".box");
    var img = document.querySelector(".img");
    var a = document.querySelector(".a");

    // html的自定义
    console.log( box.getAttribute("abc") );
    console.log( box.getAttribute("src") )
    console.log( box.getAttribute("value") )
    console.log( img.getAttribute("href") )
    console.log( a.getAttribute("src") )
    // html的内置
    console.log( img.src )
    console.log( img.alt )
    console.log( a.href )
    // 注意：当前元素，有没有对应属性

    // js的内置
    console.log( box.innerHTML );
    console.log( box.innerText );
    console.log( box.firstElementChild );
    console.log( box.nodeType );
    console.log( box.offsetLeft );
    // ......

    // js自定义
    box.abc = "这是js自定义的abc";
    box.hahah = "这是js自定义的hahaha";
    box.src = "这是js自定义的src";
    console.log( box.abc );
    console.log( box.hahah );
    console.log( box.src );

    // - 对象操作：html内置，js内置，js自定义
    //     - 将元素作为对象使用
    //         - 点语法，中括号
    // - 专属方法操作：html自定义，html内置
    //     - 利用DOM提供的方法进行操作
    //         - 元素.getAttribute("属性名")
    //         - 元素.setAttribute("属性名", "属性值")
    //         - 元素.removeAttribute("属性名")

    // box.setAttribute("qf","牛逼")

    // box.qf = "牛";
    
    // console.log(box.qf)


    // 特殊的html属性：
    console.log( box.className );
    console.log( box.getAttribute("class") );
    box.setAttribute("className", "1313425");
    console.log( box.className );

    // 补充js属性：
    console.log( box.tagName );
    console.log( box.classList );
    console.log( input.checked );


</script>
</html>